<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>title</title>
		<link rel="stylesheet" type="text/css" href="../css/api.css"/>
		<link rel="stylesheet" type="text/css" href="../css/aui1.css"/>
		<style>
			body {
				width: 100%;
				height: 100%;
			}
			.register_bg {
				width: 100%;
				height: 100%;
				background: url("../image/images/bg.png") no-repeat;
				background-size: 100%;
				-webkit-background-size: 100%;
				background-position: 0 0;
				position: fixed;
				top: 0;
				left: 0;
			}
			.Wrap {
				width: 100%;
				min-height: 100%;
				text-align: center;
				opacity: 0.9;
				position: absolute;
				top: 0;
				left: 0;
			}
			.register_content {
				width: 100%;
				min-height: 100%;
				text-align: center;
			}
			#logo {
				margin: 9% 35%;
			}
			.input-wrapper {
				position: relative;
			}
			/*input标签修改placeholder的颜色样式*/
			/*.t1 input::-webkit-input-placeholder{*/
			/*color: #0C6A58;*/
			/*}*/
			.input-wrapper .tit_left {
				width: 1.2rem;
				position: absolute;
				top: 22%;
				left: 5%;
			}
			.input-wrapper .tit_right {
				width: 1.2em;
				position: absolute;
				top: 22%;
				right: 4%;
			}
			.messgae input {
				padding-left: 3.125em;
			}
			.ps {
				margin-top: 0;
			}
			.p1 {
				float: left;
			}
			.p2 {
				float: right;
			}
			.speed_register {
				margin-left: 1em;
				color: #0499EB;
			}
			.fotget_msg {
				margin-right: 1em;
				color: #A29F9D;
			}
			.hide {
				display: none;
			}
			.dropdown-list {
				position: absolute;
				top: calc(100% - 20px);
				z-index: 100;
				width: 100%;
				border-radius: 0 0 .5rem .5rem;
				overflow: hidden;
			}
			.dropdown-list li {
				box-sizing: border-box;
				text-align: left;
				line-height: 21px;
				background: #eee;
				border-radius: 0 0 .5rem .5rem;
				padding: 10px 0 10px 3.125 rem;
			}
			.dropdown-list li:hover {
				background: #EEE;
			}
		</style>
	</head>
	<body>
		<div class="register_bg"></div>
		<div class="Wrap">
			<form action="" style="padding: 10%;">
				<div class="messgae">
					<!--            <div class="input-wrapper t1">
					<img class="tit_left" src="../image/images/xx1.png" style="z-index: 2;" alt="">
					<div style="position: relative;">
					<input class="t1" id="inputType" style="border-radius: 0.5rem; border: 0" type="text" readonly data-type="manager" value="项目经理" />
					<ul id="$box" data-type="worker" class="hide dropdown-list">
					<li >劳务人员</li>
					</ul>
					</div>
					<img class="tit_right" src="../image/images/xl.png"  style="z-index: 2;" onclick="$box.classList.toggle('hide');"  alt="">
					</div>-->
					<div class="input-wrapper">
						<img class="tit_left" src="../image/images/xx2.png" alt="">
						<input class="" id="username" type="text" placeholder="请输入你的账号" pattern="[A-Za-z0-9]{6,13}" style="border-radius: 0.5rem; border: 0" required/>
						<img class="tit_right aui-icon-roundclosefill" src="../image/images/xx.png" alt="" onclick="clearInput()">
					</div>
					<div class="input-wrapper">
						<img class="tit_left" src="../image/images/xx3.png" alt="">
						<input id="password" type="password" placeholder="请输入密码" pattern="[A-Za-z0-9]{6,13}" style="border-radius: 0.5rem;  border: 0" required/>
					</div>
				</div>
			</form>
			<div class="aui-content aui-content-padded">
				<div class="aui-btn aui-btn-info aui-btn-block ps" tapmode onclick="GetLogin();" style="background-color: #03a9f4; border:0;">
					登录
				</div>
			</div>
			<div class="p1">
				<span class="speed_register" tapmode onclick="register('')">注册</span>
			</div>
			<div class="p2">
				<span class="fotget_msg" tapmode onclick="forget('')">忘记密码</span>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../script/api.js"></script>
	<script type="text/javascript" src="../script/ajax/common.js"></script>
	<script type="text/javascript" src="../script/jquery-3.2.1.min.js" charset="utf-8"></script>
	<script type="text/javascript">
		apiready = function() {
			var username = $api.getStorage("username");
			var password = $api.getStorage("password");
			if (username != null && username != "") {
				$("#username").val(username);
				if (password != null && password != "") {
					$("#password").val(password);
				}
			}
		};
		function GetLogin() {
			var username = document.getElementById('username').value;
			var password = document.getElementById('password').value;
			//    alert(base_url);
			api.ajax({
				url : base_url + 'app/server/login',
				method : 'post',
				data : {
					values : {
						userName : username,
						password : password
					}
				}
			}, function(ret, err) {
				if (ret.code === 0 && ret.userInfo) {
					/* alert(ret.code);*/
					var user = ret.userInfo;
					console.log(JSON.stringify(user));
					$api.setStorage("userInfo", user);
					$api.setStorage("username", username);
					$api.setStorage("password", password);
					api.openWin({
						name : 'main1_win',
						url : 'main1_win.html?t=' + new Date().getTime(),
						bounces : false,
						slidBackEnabled : false,
						vScrollBarEnabled : false
					});
				} else {
					api.alert({
						title : '登录信息',
						msg : ret.msg,
						buttons : ['确定']
					});
				}
			});
		}

		function clearInput() {
			$api.val($api.byId("username"), '');
		}

		function forget() {
			api.openWin({
			name : 'forget_win',
			url : 'forget_win.html?ver=' + Math.random(),
			slidBackEnabled : false
			})
		} 
		function register() {
			api.openWin({
				name : 'register_win',
				url : 'register_win.html?ver=' + Math.random(),
				slidBackEnabled : false
			});
		}

		//下拉列表
		//var list = $api.byId('$box'),
		//  $input = $api.byId('inputType');
		//$api.byId('inputType').style.color = '#0C6A58';
		//list.addEventListener('click', function (e) {
		//  var li = e.target,
		//    index,
		//    children = this.children,
		//    liType = this.getAttribute('data-type'),
		//    value = $input.value,
		//    inputType = $input.getAttribute('data-type');
		//  // li 拿出来
		////    li = this.removeChild(li);
		//  $input.value = li.innerHTML;
		//  $input.setAttribute('data-type', liType);
		//  this.setAttribute('data-type', inputType);
		//  li.innerHTML = value;
		//
		//  this.classList.toggle('hide');
		//});
	</script>
</html>